<template>
  <div class="page">
    <!-- 预约历史 -->
    <div class="support">
      <h3>
        <span class="left">
          <i class="icon iconfont icon-dianzan1"></i>
          <span>预约历史</span>
        </span>
        <!-- @click="routerJump('push', 'Databases')" -->
        <i class="jump iconfont icon-fanhui"></i>
      </h3>
      <div class="concernInfo">
        <div
          v-if="!roomAppointmentSuccess.total"
          style="color: #999; font-weight: 500; font-size: 18px; letter-spacing: 1px"
        >
          <el-empty
            :image-size="100"
            description="暂无预约成功信息，请前往预约合适的自习室吧."
          ></el-empty>
        </div>
        <el-row v-else :gutter="20">
          <el-col
            :span="8"
            v-for="articleItem in roomAppointmentSuccess.lists"
            :key="articleItem.id"
          >
            <el-card class="box-card" shadow="hover" @click="showDialog(articleItem)">
              <div class="expired" v-show="articleItem.is_expired">已过期</div>
              <el-tag type="info" effect="dark">预约成功</el-tag>
              <div
                class="imgBox"
                :style="{
                  backgroundImage: `url(${articleItem.image})`
                }"
              ></div>

              <div class="content">
                <div class="title">
                  {{ articleItem.name }}
                </div>
                <div class="summary">预约日期:{{ articleItem.reservation_date }}</div>
                <div class="summary">开始时间:{{ articleItem.start_time }}</div>
                <div class="summary">结束时间:{{ articleItem.end_time }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <appointmentDialog ref="dialogRef" :appointmentData="appointmentData"></appointmentDialog>
      </div>

      <!-- 分页器 -->
      <ele-pagination
        :defaultPageSize="3"
        :totalCount="roomAppointmentSuccess.total"
        @paginationChange="getAppointmentSuccess"
      ></ele-pagination>
    </div>

    <!-- 我的预约 -->
    <div class="collect">
      <h3>
        <span class="left">
          <i class="icon iconfont icon-xihuan1"></i>
          <span>所有预约</span>
        </span>
        <!-- @click="routerJump('push', 'Databases')" -->
        <i class="jump iconfont icon-fanhui"></i>
      </h3>
      <div class="concernInfo">
        <div
          v-if="!roomAppointment.total"
          style="color: #999; font-weight: 500; font-size: 18px; letter-spacing: 1px"
        >
          <el-empty :image-size="100" description="暂无预约，请前往预约合适的自习室吧."></el-empty>
        </div>
        <el-row v-else :gutter="20">
          <el-col :span="8" v-for="articleItem in roomAppointment.lists" :key="articleItem.id">
            <!-- @click="goAppointmentInfoPage(articleItem)" -->
            <el-card class="box-card" shadow="hover">
              <el-tag type="info" v-if="articleItem.reservationState == 3" effect="dark"
                >待审核</el-tag
              >
              <el-tag type="success" v-if="articleItem.reservationState == 2" effect="dark"
                >审核成功</el-tag
              >
              <el-tag type="danger" v-if="articleItem.reservationState == 1" effect="dark"
                >审核失败</el-tag
              >

              <div
                class="imgBox"
                :style="{
                  backgroundImage: `url(${articleItem.image})`
                }"
              ></div>

              <div class="content">
                <div class="title">
                  {{ articleItem.name }}
                </div>
                <div class="summary">预约日期:{{ articleItem.reservation_date }}</div>
                <div class="summary">开始时间:{{ articleItem.start_time }}</div>
                <div class="summary">结束时间:{{ articleItem.end_time }}</div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页器 -->
      <ele-pagination
        :defaultPageSize="3"
        :totalCount="roomAppointment.total"
        @paginationChange="getAppointment"
      ></ele-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import useRouterJump from "@/hooks/useRouterJump"
import useStudyRoomStore from "@/store/main/studyRoom/studyRoom"
import appointmentDialog from "@/views/PersonalCenter/cpns/appointmentDialog.vue"

import { localCache } from "@/utils/cacheData"
import { storeToRefs } from "pinia"
import { ref, onMounted } from "vue"
const { routerJump } = useRouterJump()

const studyRoomStore = useStudyRoomStore()
const { roomAppointment, roomAppointmentSuccess } = storeToRefs(studyRoomStore)

/* 获取预约的数据 */
function getAppointment(limit?: number, offset?: number) {
  studyRoomStore.getAppointment(limit, offset)
}

/* 获取成功预约的数据 */
function getAppointmentSuccess(limit?: number, offset?: number) {
  studyRoomStore.getAppointmentSuccess(limit, offset)
}

const appointmentData = ref()

const dialogRef = ref()
function showDialog(data) {
  console.log(appointmentData)

  dialogRef.value!.dialogRef!.showDialog = true
  appointmentData.value = data
}

/* 去文章信息页面 */
function goAppointmentInfoPage(item) {
  console.log(234)

  localCache.setCache("roomInfo", item)

  routerJump("push", "RoomParticulars")
}

onMounted(() => {
  getAppointment()
  getAppointmentSuccess()
})
</script>

<style lang="less" scoped>
.page {
  .collect,
  .support {
    h3 {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 1px;
      .left {
        display: flex;
        align-items: center;
        .icon {
          font-size: 24px;
          color: #999;
          margin-right: 6px;
        }
      }

      .jump {
        cursor: pointer;
        float: right;
        color: rgba(153, 153, 153, 0.65);
        line-height: 24px;
        font-size: 18px;
        transition: all 0.5s;
        &:hover {
          color: #666;
        }
      }
    }
  }

  // 我的收藏
  // 我的发布
  .collect,
  .support,
  .opinion {
    padding: 20px 34px 20px;
    width: 620px;
    // height: 260px;
    border-radius: 16px;
    background: #fff;
    margin-bottom: 40px;

    .concernInfo {
      // height: 100px;
      // background-color: red;
      position: relative;
      margin-top: 20px;
      .defaultImg {
        width: 40%;
        margin: 0 auto;
        img {
          width: 100%;
        }
      }
      .el-card {
        position: relative;
        border-radius: 12px;
        margin-bottom: 20px;
        padding: 0;
        height: 240px;

        .expired {
          position: absolute;
          top: 10px;
          left: 10px;
          color: #fff;
          // font-weight: 600;
        }

        .imgBox {
          display: inline-block;
          // background-color: red;
          width: 100%;
          height: 120px;
          border-radius: 10px;
          // background-image: url("../../assets/cover.png") !important;
          background-repeat: no-repeat;
          background-position: center center;
          background-size: cover;
        }

        .portrait {
          width: 100%;
          height: 120px;
          padding: 10px;
          box-sizing: border-box;
          border-bottom: 1px solid #dbdbdb;
          display: flex;
          align-items: center;
          img {
            width: 55px;
            height: 49px;
            // 利用mask裁剪出图案
            // border-radius: 50%;
            mask-image: url("/images/interflow_icon/board-icon-mask.svg");
            -webkit-mask-image: url("/images/interflow_icon/board-icon-mask.svg");
            mask-repeat: round;
            -webkit-mask-repeat: round;
          }
          .describe {
            display: flex;
            flex-direction: column;
            // justify-content: space-around;
            margin-left: 10px;
            .name {
              font-weight: 600;
              font-size: 17px;
              width: 50%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              letter-spacing: 0.5px;
            }
            .info {
              margin-top: 1px;
              font-size: 13px;
              width: 50%;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              letter-spacing: 0.5px;
              color: rgb(147, 165, 189);
            }
          }
        }

        .content {
          position: relative;
          box-sizing: border-box;
          padding: 12px 14px;
          height: 120px;
          .title {
            // width: 300px;
            width: 100%;
            font-size: 16px;
            letter-spacing: 0.5px;

            // 当行文本溢出省略号
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .summary {
            margin-top: 10px;
            font-size: 12px;
            color: #666;
            // 多行文本溢出省略号
            display: -webkit-box; /* 将元素设为弹性伸缩容器 */
            -webkit-box-orient: vertical; /* 设置弹性伸缩容器中的子元素垂直排列 */
            overflow: hidden; /* 隐藏超出的内容 */
            text-overflow: ellipsis; /* 显示省略号 */
            white-space: normal; /* 允许换行 */
            -webkit-line-clamp: 2; /* 设置最多显示两行 */
          }
          .tags {
            margin-top: 20px;
            display: flex;
            align-items: center;
            .topic {
              cursor: pointer;
              display: flex;
              align-items: center;
              border: 1px solid rgba(14, 21, 28, 0.4);
              height: 28px;
              border-radius: 17px;
              padding: 0 10px 0 10px;
              overflow: hidden;
              margin-right: 12px;
              img {
                width: 16px;
                height: 16px;
                border-radius: 50%;
                margin-right: 4px;
              }
              i {
                font-size: 13px;
              }
            }
            .el-tag {
              margin-right: 10px;
            }
          }
          .mark {
            position: absolute;
            bottom: 10px;
            right: 8px;
            margin-top: 12px;
            display: flex;
            justify-content: space-between;
            .info {
              color: #666;
            }
            .data {
              // font-weight: 600;
              color: #888;
              span {
                font-size: 16px;
                margin-left: 6px;
                i {
                  font-size: 14px;
                  margin-left: 1px;
                }
              }
            }
          }
          .createDate {
            margin-top: 20px;
            // overflow: hidden;
            i {
              // float: right;
              color: #999999;
            }
          }
        }
      }
    }
  }

  .publish,
  .collect,
  .support {
    .concernInfo {
      .el-card {
        .el-tag {
          position: absolute;
          top: 10px;
          right: 10px;
        }
      }
    }
  }

  .opinion {
    .header {
      font-size: 18px;
      font-weight: 500;
      letter-spacing: 1px;
      display: flex;
      justify-content: space-between;
      .reply {
        cursor: pointer;
        width: 22px;
        height: 22px;
      }
    }

    .concernInfo {
      .content {
        h3 {
          letter-spacing: 0.5px;
        }
        .footer {
          margin-top: 10px;
          .createdTime {
            color: #999999;
          }
          .delete {
            cursor: pointer;
            float: right;
            width: 24px;
            height: 24px;
          }
        }
      }
    }
  }
}
</style>

<style scoped>
.el-card {
  --el-card-padding: 0px;
}
</style>
